<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <header class="fixed top-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-sm shadow-sm z-50">
    <div class="max-w-7xl mx-auto px-4 h-full flex items-center justify-between">
      <!-- Logo区域 -->
      <div class="flex items-center gap-2">
        <img :src="logoUrl" alt="Travel Logo" class="h-10 w-10 object-contain" />
        <span class="text-xl font-bold bg-gradient-to-r from-blue-600 to-teal-500 bg-clip-text text-transparent">
          探途旅行
        </span>
      </div>
      <!-- 主导航菜单 -->
      <nav class="flex-1 flex justify-center">
        <ul class="flex items-center gap-12">
          <li v-for="item in navItems" :key="item.id">
            <RouterLink :to="item.to"
                        class="text-gray-600 hover:text-blue-600 py-6 relative group text-sm font-medium"
                        :class="{'text-blue-600': item.active}">
              {{ item.name }}
              <span class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-600 transform scale-x-0 group-hover:scale-x-100 transition-transform"></span>
            </RouterLink>
          </li>
        </ul>
      </nav>

      <!-- 功能区域 -->
      <div class="flex items-center gap-6">
        <!-- 搜索 -->
        <div class="relative">
          <div v-if="showSearch" class="absolute right-0 top-1/2 -translate-y-1/2 w-64 flex items-center">
            <input
                ref="searchInput"
                type="text"
                class="w-full pl-4 pr-10 py-2 text-sm border-none rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="搜索景点"
                v-model="scenicSpotName"
                @blur="handleSearchBlur"
            />
            <el-icon class="absolute right-3 text-gray-400">
              <Search />
            </el-icon>
          </div>
          <button v-else @click="toggleSearch" class="p-2 hover:text-blue-600 text-gray-600">
            <el-icon><Search /></el-icon>
          </button>
        </div>

        <!--&lt;!&ndash; 购物车 &ndash;&gt;-->
        <!--<div class="relative">-->
        <!--  <template v-if="userStore.userInfo">-->
        <!--    <button class="p-2 hover:text-blue-600 text-gray-600">-->
        <!--      <RouterLink to="/user/cart"><el-icon><ShoppingCart/></el-icon></RouterLink>-->
        <!--    </button>-->
        <!--    <span v-if="cartCount > 0"-->
        <!--          class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">-->
        <!--    {{ cartCount }}-->
        <!--  </span>-->
        <!--  </template>-->

        <!--</div>-->

        <!-- 登录/注册按钮 -->
        <button class="!rounded-button px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 transition-colors whitespace-nowrap text-sm">
          <template v-if="!userStore.userInfo">
            <RouterLink to="/user/login">登录 /</RouterLink>
            <RouterLink to="/user/reg"> 注册</RouterLink>
          </template>
          <template v-else>
            <!--<RouterLink to="/user/cart"><el-icon><ShoppingCart/></el-icon></RouterLink>-->
            <RouterLink to="/user/center">{{ userStore.userInfo.username }} / </RouterLink>
            <el-link :underline="false" type="danger" @click="logout">退出</el-link>
          </template>
        </button>
      </div>
    </div>
    
  </header>

  <!-- 占位符，防止固定定位导致的内容被遮挡 -->
  <div class="h-16"></div>
  <!--上架的第一级分类-->
    <div class="center">
      <ul class="category">
         <li v-for="(category, index) in parentList" :key="index">
           <RouterLink :to="`/user/search${category.id}`">
           </RouterLink>
         </li>
      </ul>
    </div>
</template>

<script  setup>
import { ref, onMounted } from 'vue';
import { Search, ShoppingCart } from '@element-plus/icons-vue';
import categoryApi from "@/api/categoryApi.js";
import {useUserStore} from "@/stores/user.js";
import {useTokenStore} from "@/stores/tokenStore.js";
import {useRouter} from "vue-router";

const router = useRouter();
const tokenStore = useTokenStore();
const userStore = useUserStore();
const logoUrl = 'https://ai-public.mastergo.com/ai/img_res/d98779bf839519ff714b728c3388f9e8.jpg';

const navItems = ref([
  { id: 1, name: '首页', active: true, to: '/user/index' },
  { id: 2, name: '景点排行', active: false, to: '/user/search'},
  { id: 3, name: '在线售票', active: false, to: '/user/search' },
  { id: 4, name: '旅游攻略', active: false, to: '/user/strategyList' }
]);
const parentList = ref([]);
const showSearch = ref(false);
const searchInput = ref<HTMLInputElement | null>(null);
const cartCount = ref(3);

//1.获取父分类 2.获取上架的
const getParent = ()=>{
  const condition = {
    parentId: 0,
    status: 1
  };
  categoryApi.selectByPage(condition)
      .then(resp => {
        parentList.value = resp.data;
      })
}
const toggleSearch = () => {
  showSearch.value = true;
};
//点击搜索跳转Search界面
const search = ()=>{
  //携带scenicSpotName跳到search页面
  router.push({
    path: '/user/search',
    query: {
      scenicSpotName: scenicSpotName.value
    }
  })
}
const scenicSpotName = ref('');
const handleSearchBlur = () => {
  //携带scenicSpotName跳到search页面
  router.push({
    path: '/user/search',
    query: {
      scenicSpotName: scenicSpotName.value
    }
  })
};
const logout = () => {
  //清空token
  tokenStore.$reset();
  //清空用户信息
  userStore.$reset();
  //跳转到前台首页
  router.push("/user/index")
}
getParent();
</script>

<style scoped>
.header-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/*一级分类样式*/
.category {
  background-color: var(--theme-color);
  line-height: 30px;
}
.category li {
  float: left;
  padding: 0 10px;
}
.category li a {
  color: #fff;
}
.category li:hover {
  background-color: wheat;
}
</style>

